{% extends "qbuilder/tickbase.html" %}

{% block imports_js %}
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/Highcharts/themes/grid.js"></script>
{% endblock %}

{% block qbuilder_functions_js %}
    var chart;
    function convert_custom_type(rawvalue)
        {
        if (rawvalue == undefined) return rawvalue;
        if (typeof(rawvalue) == "object")
            {
            if (rawvalue.custom_type == "datetime")
                {
                // We remove 1 from the month because in JS' Date, January is 0, not 1
                return Date.UTC(rawvalue.value[0], rawvalue.value[1] - 1, rawvalue.value[2], rawvalue.value[3], rawvalue.value[4], rawvalue.value[5]);
                }
            if (rawvalue.custom_type == "timedelta")
                {
                return parseFloat(rawvalue.value);
                }
            }
        return rawvalue;
        }
    function convert_xaxis_categories(raw_data_from_python)
        {
        if (raw_data_from_python.length == 0) return null;
        var converted_data = new Array();
        for (index in raw_data_from_python)
            {
            value = raw_data_from_python[index];
            converted_value = convert_custom_type(value);
            converted_data.push(converted_value);
            }
        return converted_data;
        }
    function make_xAxis_type(raw_data_from_python)
        {
        var first_x_value = raw_data_from_python[0];
        if (typeof(first_x_value) == "object")
            {
            if (first_x_value.custom_type == "datetime")
                {
                return 'datetime';
                }
            }
        return 'linear';
        }
    function convert_series_data(raw_data_from_python)
        {
        var converted_data = new Array();
        for (serie in raw_data_from_python)
            {
            var serie_parameters = raw_data_from_python[serie];
            var seriedata = serie_parameters.data;
            var converted_seriedata = new Array();
            if (serie_parameters.type == "stackedcolumn")
               {
               serie_parameters.type = "column";
               }
            else if (serie_parameters.type == "stackedbar")
               {
               serie_parameters.type = "bar";
               }
            for (index in seriedata)
                {
                value = seriedata[index];
                if (value instanceof Array)
                   {
                   converted_value = new Array();
                   for (subvalue in value)
                      {
                      converted_value.push(convert_custom_type(value[subvalue]));
                      }
                   }
                else
                   {
                    converted_value = convert_custom_type(value);
                   }
                converted_seriedata.push(converted_value);
                }
            serie_parameters.data = converted_seriedata;
            converted_data.push(serie_parameters);
            }
        return converted_data;
        }
    {% if friseData %}
    function convert_frise_data(data)
        {
        for (i in data)
            {
            if (data[i].subrows)
                {
                for (j in data[i].subrows)
                    {
                    for (k in data[i].subrows[j])
                        {
                        if (data[i].subrows[j][k].custom_type)
                            {
                            data[i].subrows[j][k] = convert_custom_type(data[i].subrows[j][k]);
                            }
                        }
                    }
                }
            }
        return data;
        }
    {% endif %}
{% endblock %}

{% block make_chart_js %}
    {% if seriesData %}
        $(document).ready(function() {
            var x_axis_type = "linear";
            var xAxis_categories = {{ xAxis_categories|safe|default:"[]" }};
            var seriesData = {{seriesData|safe|default:"[]"}};
            if (xAxis_categories.length > 0)
                {
                x_axis_type = make_xAxis_type(xAxis_categories);
                }
            else if (seriesData.length > 0)
                {
                x_axis_type = make_xAxis_type([seriesData[0].data[0][0]]);
                }
            var converted_series_data = convert_series_data(seriesData);
            var xAxis = {
                    type: x_axis_type,
                    categories: convert_xaxis_categories(xAxis_categories),
                    plotBands: {{ xAxis_plotBands|safe|default:"[]" }},
                    dateTimeLabelFormats: {
                        hour: '%d/%m<br/>%H:%M',
                        },
                    title: {
                        text: '{{ xAxis_title_text }}',
                        align: 'high',
                    },
                    labels: {
                        rotation: {{ xAxis_labels_rotation }},
                        align: 'right',
                    },
                };
            var yAxis = {
                    type: '{{ yAxis_type|default:"linear" }}',
                    max: {{ yAxis_max|default:"null" }},
                    min: {{ yAxis_min|default:"null" }},
                    title: {
                        text: '{{ yAxis_title_text }}',
                    },
                    stackLabels: {
                        enabled: '{{ yAxis_stackLabels|default:"false" }}',
                        },
                    };
            {% if xAxis %}
                var xAxis_settings = {{ xAxis|safe|default:"{}" }};
                for (k in xAxis_settings)
                    {
                    xAxis[k] = xAxis_settings[k];
                    }
            {% endif %}
            {% if yAxis %}
                var yAxis_settings = {{ yAxis|safe|default:"{}" }};
                for (k in yAxis_settings)
                    {
                    yAxis[k] = yAxis_settings[k];
                    }
            {% endif %}
            chart = new Highcharts.Chart({
                {% if colors %}
                colors: {{ colors|safe|default:"[]" }},
                {% endif %}
                chart: {
                    renderTo: 'container',
                    zoomType: "xy",
                },
                title: {
                    text: '{{ title_text|default:"QueryBuilder" }}',
                },
                subtitle: {
                    text: '{{ subtitle_text|default:"" }}{{ subtitle_suffix|default:"" }}',
                    },
                credits: {
                    enabled: false,
                },
                navigation: {
                    buttonOptions: {
                        enabled: false,
                    },
                },
                legend: {
                    backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
                    shadow: true,
                },
                xAxis: xAxis,
                yAxis: yAxis,
                tooltip: {
                    formatter: function() {
                        return {{ tooltip_formatter|safe|default:"" }};
                        },
                    },
                plotOptions: {{ plotOptions|safe|default:"{}" }},
                series: converted_series_data,
            });
        });
    {% endif %}
{% endblock %}

{% block graph_container %}
    {% if full_screen %}
        <a href="?full_screen=0">Sortir du plein ecran</a>
    {% else %}
        <a href="?full_screen=1">Mettre en plein ecran</a>
    {% endif %}
    {% if show_sql %}
        <pre id="requete">{{ sql_query }}</pre>
    {% endif %}
    {# <pre id="resultat" style="display: none;">{{ query_result }}</pre> #}
    {% if show_data %}
        <table>
            <thead>
                <tr>
                    {% for k in keys %}
                        <th>{{ k }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for dataline in query_result %}
                    <tr>
                        {% for cell in dataline %}
                            <td>{{ cell }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    <div id="container" style="height:480px; margin: 0 2em; min-width: 620px;"></div>
    <div class="align-left" style="font-style: italic">
        {{ description|default_if_none:""|linebreaks }}
    </div>
{% endblock %}
